<template>
  <div class="detail-wrap">
    <van-swipe class="swiper-wrap" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgArr" :key="index">
        <img class="slide-img" :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>

    <div class="price-floor">
      <div class="price-box">
        <div class="unit">￥</div>
        <div class="price">
          <span class="num">{{ ticketInfo.ticket_price / 100 }} </span>
          <span>起</span>
        </div>
      </div>
      <div class="times">{{ ticketInfo.ticket_times }} 次</div>
    </div>
    <div class="floor">
      <div class="titck-floor">
        <div class="title">{{ ticketInfo.template_title }}</div>
        <div class="desc">{{ ticketInfo.template_desc }}</div>
      </div>
      <div class="titck-floor">
        <div class="titck-start">
          有效期：{{ ticketInfo.start_date }} 至 {{ ticketInfo.end_date }}
        </div>
        <div class="data-wrap" v-show="ticketInfo.one_day == 1">
          <!-- <div class="data-wrap"> -->
          <div class="title" style="margin-right: 6px">选择入场日期：</div>
          <div class="prebook" @click="handleShowCalendar">
            <van-calendar
              v-model:show="showDate"
              v-if="!ticketInfo.start_date || !ticketInfo.end_date"
              :value="specified_date"
              color="#d5ad57"
              @confirm="handleConfirm"
              @close="handleClose"
            />
            <van-calendar
              v-model:show="showDate"
              v-if="ticketInfo.start_date && ticketInfo.end_date"
              :min-date="new Date(ticketInfo.start_date)"
              :max-date="new Date(ticketInfo.end_date)"
              :value="specified_date"
              color="#d5ad57"
              @confirm="handleConfirm"
              @close="handleClose"
            />
            <img v-if="showIcon" src="./../../assets/img/calendar.png" />
            <div v-else class="showDate">{{ specified_date }}</div>
          </div>
        </div>
      </div>
      <!-- 选择泳客 -->
      <div class="titck-floor" v-if="users.length > 1">
        <div class="titck-user">
          <div class="titck-user-title">选择泳客：</div>
          <div class="titck-user-list">
            <div
              v-for="(item, index) in users"
              :key="index"
              :class="[
                'user-item',
                index == activeUserIndex ? 'user-item-active' : '',
              ]"
              @click="selectUser(item, index)"
            >
              {{ item.nick_name }}
            </div>
          </div>
        </div>
      </div>
      <!-- 场次 -->
      <div class="titck-floor">
        <div class="sessions">
          <div class="sessions-title">选择场次：</div>
          <div
            class="sessions-con"
            v-for="(item, index) in sessions"
            :key="index"
          >
            <div
              :class="[
                'sessions-item',
                index == activeSessionsIndex ? 'sessions-item-active' : '',
              ]"
              @click="selectSessions(item, index)"
            >
              <div class="start_time">
                {{ item.start_time }} - {{ item.end_time }}
              </div>
              <div class="sessions-price">￥{{ item.ticket_price / 100 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- btn -->
    <div class="ticket-detail-btn-wrap">
      <div
        class="ticket-detail-btn"
        v-if="ticketInfo.charge_platform == 'YAN30'"
        @click="handleBuy"
      >
        <div class="ticket_price">
          <span>￥</span>
          <span class="num">{{ ticket_price / 100 }}</span>
        </div>
        <div class="btn">购买</div>
      </div>
      <div
        class="ticket-detail-btn"
        v-else-if="ticketInfo.charge_platform == 'FREE'"
        @click="handleFree"
      >
        <div class="btn">免费领取</div>
      </div>
      <div class="ticket-detail-btn" v-else>
        <div class="btn">已购买</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import wx from 'weixin-js-sdk'
import { reactive, ref, onMounted, watch, computed } from 'vue'
import { showSuccessToast, showFailToast, showToast } from 'vant'
import { postData } from '@/request/request.js'
import { useRouter, useRoute } from 'vue-router'
let router = useRouter()
let route = useRoute()
let query = route.query
localStorage.setItem('user_id', query.user_id)
localStorage.setItem('access_token', query.access_token)
localStorage.setItem('open_id', query.open_id)
localStorage.setItem('currentPath', query.currentPath)

let imgArr = ref([
  'https://ya30images.hbwlife.com/site/17001-ticket-1.jpg',
  'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
  'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
])
let ticketInfo = ref({})
let sessions = ref([])
let ticket_price = ref('')
let session_id = ref('')
let activeSessionsIndex = ref('')
let specified_date = ref('') //日期
let ticket_id = ref('')
const showDate = ref(false)
let showIcon = ref(true)

let users = ref([]) //携行用户arr
let activeUserIndex = ref('')
let user_carrey_id = ref('') //自己或者携行用户id，初始显示自己

let template_id = query.queryId

let ticketTemplateInfo = () => {
  postData('/common/ticket/template/info', {
    template_id: template_id,
    with_session: 1,
  })
    .then((res) => {
      ticketInfo.value = res?.datas
      /* 场次 */
      sessions.value = JSON.parse(JSON.stringify(ticketInfo.value.sessions))
      ticket_price.value = sessions.value[0].ticket_price //初始展示
      session_id.value = sessions.value[0].session_id //初始展示
    })
    .catch((err) => {
      console.log(err)
    })
}

//携行用户list
const initCarriedList = () => {
  postData('/user/carried/list', {
    with_health: 1,
  })
    .then((res) => {
      let obj = {
        nick_name: '我自己',
        user_id: query.user_id,
      }
      let result = res?.datas?.users || []
      result.unshift(obj)
      users.value = result
      console.log(users.value)
    })
    .catch((err) => {
      console.log(err)
    })
}

//选择携行用户
let selectUser = (item, index) => {
  activeUserIndex.value = index
  user_carrey_id.value = item.user_id
}

//选择场次
let selectSessions = (item, index) => {
  session_id.value = item.session_id
  ticket_price.value = item.ticket_price
  activeSessionsIndex.value = index
}

/* 日历 */
const formatDate = (date) => {
  return `${date.getFullYear()}-${
    date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  }-${date.getDate() < 10 ? '0' + date.getDate() : date.getDate()}`
}

let handleConfirm = (value) => {
  if (value) {
    specified_date.value = formatDate(value)
    setTimeout(() => {
      showDate.value = false
      showIcon.value = false
    }, 0)
  }
}
let handleClose = () => {
  setTimeout(() => {
    showDate.value = false
  }, 0)
}

/* 购买 */
let handleBuy = () => {
  let user_id = localStorage.getItem('user_id')
  if (!user_id || user_id == '') {
    showToast('请先绑定手机号')
    setTimeout(() => {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pages/loginPhone/loginPhone',
        })
    }, 1000)
  } else if (specified_date.value == '') {
    showToast('请先选择入场日期')
  } else if (user_carrey_id.value == '') {
    showToast('请先选择泳客') //给了默认第一个，其实这判断也没用
  } else {
    //console.log(666, specified_date.value)
    wx &&
      wx.miniProgram.navigateTo({
        url: `/pagesB/wxPay/wxPay?session_id=${session_id.value}&user_carrey_id=${user_carrey_id.value}&specified_date=${specified_date.value}&template_id=${template_id}`,
      })
  }
}

//免费领取
let handleFree = () => {
  let user_id = localStorage.getItem('user_id')
  if (!user_id || user_id == '') {
    showToast('请先绑定手机号')
    setTimeout(() => {
      wx &&
        wx.miniProgram.navigateTo({
          url: '/pages/loginPhone/loginPhone',
        })
    }, 1000)
  } else {
    postData('/user/ticket/buy/free', {
      user_id: user_carrey_id.value,
      session_id: session_id.value,
    })
      .then((res) => {
        showSuccessToast('领取成功')
      })
      .catch((err) => {
        console.log(err)
        showFailToast('领取失败')
      })
  }
}

let handleShowCalendar = () => {
  showDate.value = true
}

onMounted(() => {
  user_carrey_id.value = query.user_id
  ticketTemplateInfo()
  initCarriedList()
})

watch(
  () => route.fullPath,
  () => {
    user_carrey_id.value = query.user_id
    ticketTemplateInfo()
    initCarriedList()
  }
)
</script>

<style scoped>
.detail-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
  height: auto;
  padding-bottom: 1rem;
  position: relative;
  box-sizing: border-box;

  font-size: 0.16rem;
  color: #333;
}

.swiper-wrap {
  width: 100%;
  height: 1.8rem;
  box-sizing: border-box;
}

.titck-swiper {
  width: 100%;
  height: 100%;
  padding-top: 0;
  margin-top: 0;
}

.slide-img {
  width: 100%;
  height: 100%;
}

/*  */
.price-floor {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* color: #fff; */
  color: #725722;
  background: linear-gradient(to right, #c8a357, #fbde94, #c8a357);
}

.price-floor .title {
  height: 0.4rem;
  line-height: 0.4rem;
}

.price-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.price-floor .times {
}

.price-box .unit {
}

/*  */

.price-box .price .num {
  margin: 0.05rem;
  font-weight: bold;
  font-size: 0.18rem;
}

.floor {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  /* padding: 0.02rem 0.12rem; */
  background: #f7f7f8;
}
.titck-floor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.02rem 0.12rem;
  margin-top: 0.07rem;
  background-color: #fff;
}
.titck-floor .title {
  height: auto;
  line-height: 0.3rem;
  color: #000;
}

.titck-floor .desc {
  height: auto;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #676a6d;
}

.titck-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 0.3rem;
  line-height: 0.3rem;
  margin-top: 0.1rem;
}

.data-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.data-wrap .prebook {
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-wrap .prebook img {
  width: 0.2rem;
  height: 0.2rem;
}
/* 使用者 */
.titck-user {
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.1rem 0;
}
.titck-user-title {
  color: #000;
}
.titck-user-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.user-item {
  width: auto;
  margin: 0.05rem 0;
  background: #fdfdfd;
  border: 1px solid #e6e6e6;
  border-radius: 0.05rem;
  padding: 0.04rem 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin-right: 0.15rem;
  font-size: 0.14rem;
}
.user-item-active {
  border: 0.01rem solid #ffd203;
  background: #fffae3;
  font-weight: 600;
}
.sessions {
  padding-bottom: 0.3rem;
}

.sessions-title {
  height: 0.3rem;
  line-height: 0.3rem;
  color: #000;
}

.sessions-con {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

.sessions-item {
  height: 0.35rem;
  line-height: 0.35rem;
  margin: 0.05rem 0;
  background: #f7f7f8;
  border-radius: 0.08rem;
  padding: 0.05rem 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.sessions-item-active {
  border: 0.01rem solid #dccdab;
  background: #fff;
  font-weight: 600;
}

.sessions-price {
  color: #d82a0e;
}

.ticket-detail-title-desc {
  margin-top: 0.1rem;
  color: #d5ad57;
}

.ticket-detail-comment-wrap {
  width: 100%;
  height: auto;
  background-color: #fff;
  font-size: 0.12rem;
  padding: 0.05rem 0.08rem;
  box-sizing: border-box;
  margin-top: 0.1rem;
}

.ticket-detail-comment-item {
  width: 100%;
  height: auto;
  margin-bottom: 0.05rem;
}

.ticket-detail-btn-wrap {
  position: fixed;
  left: 0;
  bottom: 0.1rem;
  width: 100%;
  height: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ticket-detail-btn {
  box-sizing: border-box;
  border: none;
  width: 90%;
  height: 0.35rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.1rem;
  /* color: #fff; */
  color: #725722;
  font-size: 0.14rem;
  font-weight: 400;
  background: linear-gradient(
    to right,
    #d4a863,
    #f9d781,
    #deb762,
    #f9d781,
    #d4a863
  );
}

.ticket-detail-btn .ticket_price .num {
  margin-right: 0.15rem;
  font-size: 0.18rem;
  font-weight: bold;
}

.ticket-detail-btn-wrap .btn {
  font-size: 0.18rem;
}
</style>
